﻿
@{
    ViewData["Title"] = "Index";
    @model List<MyCode.Data.VIewModels.Sys_ModuleVM>;
}

<environment include="Development">

    <link href="~/Layui/src/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="~/Layui/src/layuiadmin/style/admin.css" rel="stylesheet" />
    <script src="~/Layui/src/layuiadmin/layui/layui.js"></script>
    <script src="~/JQuery/jQuery-2.1.1.js"></script>
    <script>

        layui.config({
            base: '/Layui/src/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index'], function () {
            var $ = layui.$
                , admin = layui.admin
                , element = layui.element
                , router = layui.router();
        });
    </script>
    <script>
        var id = "";
        $(function () {
            $("#insert").click(function () {
                alert(id);
                layer.open({
                    type: 1 //Page层类型
                    , area: ['500px', '300px']
                    , title: '你好，layer。'
                    , shade: 0.6 //遮罩透明度
                    , maxmin: true //允许全屏最小化
                    , anim: 1 //0-6的动画形式，-1不开启
                    , content: '<div style="padding:50px;">这是一个非常普通的页面层，传入了自定义的html</div>'
                    , btn: ['确认', '关闭']
                    , yes: function () {
                        window.location.reload();
                    }, cancel: function () {
                        return true;
                    }
                });
            })
        })
        function Itemclick(obj) {
            id = $(obj).data('id');
            $(".Item-Children").removeClass("Item-parasite");
            $(obj).addClass("Item-parasite");
        }
    </script>
    <style>
        .Item-parasite {
            background-color: darkgrey;
        }

        div {
            line-height: 35px; /*设置文字行距等于div的高度*/
        }
    </style>
</environment>
<div class="layui-fluid" id="component-tabs">
    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    菜单
                </div>
                <div class="layui-card-header">
                    &nbsp;&nbsp;&nbsp;<button class="layui-btn layui-btn-sm" id="insert">新增菜单</button>
                    &nbsp;&nbsp;&nbsp;<button class="layui-btn layui-btn-sm" id="update">修改菜单</button>
                    &nbsp;&nbsp;&nbsp;<button class="layui-btn layui-btn-sm" id="delete">删除菜单</button>
                </div>
            </div>
            <div class="layui-card-body">
                <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">
                    <ul class="layui-tab-title">
                        @{
                            var Num = 1;
                            foreach (var item in Model)
                            {
                                if (Num == 1)
                                {
                                    <li class="layui-this" data-id="@item.ID">@item.Name</li>

                                }
                                else
                                {
                                    <li data-id="@item.ID">@item.Name</li>
                                }
                                Num++;
                            }
                        }
                    </ul>
                    <div class="layui-tab-content" style="background-color:white;">
                        @{
                            var Count = 1;
                            foreach (var item in Model)
                            {

                                if (Count == 1)
                                {
                                    <div class="layui-tab-item layui-show">
                                        <table class="layui-table">
                                            <colgroup>
                                                <col width="150">
                                                <col width="150">
                                                <col width="150">
                                                <col width="150">
                                                <col width="150">
                                            </colgroup>
                                            <thead>
                                                <tr>
                                                    <th>菜单名称</th>
                                                    <th>菜单链接</th>
                                                    <th>菜单图标</th>
                                                    <th>所属父级</th>
                                                    <th>添加时间</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach (var jtem in item.ChildrenVM)
                                                {
                                                    <tr data-id="@jtem.ID" class="Item-Children" onclick="Itemclick(this)">
                                                        <td>@jtem.Name</td>
                                                        <td>@jtem.alias</td>
                                                        <td>MyIcon</td>
                                                        <td>@item.Name</td>
                                                        <td>@DateTime.Now.ToString("yyy-MM-dd hh")</td>
                                                    </tr>
                                                }
                                
                                            </tbody>
                                        </table>
                                    </div>
                                }
                                else
                                {
                                    <div class="layui-tab-item">
                                        <table class="layui-table">
                                            <colgroup>
                                                <col width="150">
                                                <col width="150">
                                                <col width="150">
                                                <col>
                                            </colgroup>
                                            <thead>
                                                <tr>
                                                    <th>菜单名称</th>
                                                    <th>菜单链接</th>
                                                    <th>菜单图标</th>
                                                    <th>所属父级</th>
                                                    <th>添加时间</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach (var jtem in item.ChildrenVM)
                                                {
                                                    <tr data-id="@jtem.ID" class="Item-Children" onclick="Itemclick(this)">
                                                        <td>@jtem.Name</td>
                                                        <td>@jtem.alias</td>
                                                        <td>@item.Name</td>
                                                        <td>@DateTime.Now.ToString("yyy-MM-dd hh")</td>
                                                    </tr>
                                                }

                                            </tbody>
                                        </table>
                                    </div>
                                }
                                Count++;
                            }
                        }
                    </div>
                </div>
            </div>



        </div>
    </div>
</div>
